<template>
  <!-- <div :class="sectinzindexs=='FloodAnalysisInfo'?'sectinzindex':''" class="section-box"> -->
  <div class="section-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame title="预报" style="height: 100%" :menuName="'yubao'">
          <template v-slot:body>
            <div class="tab">
              <span v-for="(item, index) in tabList" :key="index" :class="{ activeTab: selectNum == index }"
                class="tabTit" @click="onHeadMeun(item, index)">
                {{ item }}
              </span>
            </div>
            <ShortProLeft ref="hsfxChild" @buttonEvent="showHsfx" />

          </template>
        </Frame>
      </template>
      <template v-slot:center>
        <div class="btn-left-top" :class="floleft == '2' ? 'btnLeftTops' : ''">
          <div class="btn" :class="{ active: floodAnalysisMode === 'rate' }" @click="onClickLLPL('rate')">频率</div>
          <div class="btn martop8" :class="{ active: floodAnalysisMode === 'flow' }" @click="onClickLLPL('flow')">流量</div>
        </div>
      </template>
      <template v-slot:right>
        <Frame v-show="infoTrue" title="洪水分析详情" :panel-stretch="'rights'" style="height: 100%" :menuName="'yubao'">
          <template v-slot:body>
            <ShortProRight ref="productInfo" />
          </template>
        </Frame>
      </template>
    </FrameLayout>
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'FloodAnalysisInfo'" mask
      style="width: 75%;height: 85%;position: fixed;left: 12%;top: 5%;">
      <!-- <template v-slot:title>
        河段编码:
        {{ $store.getters.dlgParams.params.rvcd }}
      </template> -->
      <template v-slot:title>
        河段详情
      </template>
      <template v-slot:body>
        <FlowAnalysisInfo />
      </template>
    </Dlgdiv>
    <!-- 防治村详情 -->
    <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" :title="false" mask class="DlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :list-styleobj="ListStyleobj1" :tablist="tablists" />
      </template>
    </Dlgdivv>
    <!-- 风险点站点详情 -->
    <Dlgdivv v-if="this.$store.getters.dlgParams.name === 'DLGYYFXD'" mask class="DlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <dlgyyfxd :list-styleobj="ListStyleobj" :tablist="[6]" />
      </template>
    </Dlgdivv>
  </div>
</template>
<script>
import ShortProLeft from '../components/ShortProLeft.vue'
import ShortProRight from '../components/ShortProRight.vue'
import FlowAnalysisInfo from './FlowAnalysisInfo.vue'
export default {
  name: 'ShortPro',
  components: {
    ShortProLeft,
    ShortProRight,
    FlowAnalysisInfo,
    'dlgyyfxd': () => import('@/views/components/dlgyyfxd.vue'),
  },
  data() {
    return {
      yyymfwSel: false,
      ruleForm: {
        Time: ''
      },
      paramsList: {
        dtBegin: '2022-07-12 06:00',
        dtEnd: '2022-07-13 16:00',
        ADDVCD: ''
      },
      RvcdTimeList: [],
      isActive: 0,
      activeName: 'llfx',
      dialogVisible: false,
      infoTrue: false,
      floodAnalysisMode: 'rate',
      sectinzindexs: '',
      floleft: '3',
      ListStyleobj: {
        'stTime': this.$moment().format('YYYY-MM-DD 08:00'),
        'enTime': this.$moment().format('YYYY-MM-DD HH:mm')
      },
      ListStyleobj1: {
        'stTime': this.hsfxFzcDate,
        'enTime': this.hsfxFzcDate,
      },
      tablists: [],
      //  tabList:['降雨信息','洪水分析'], //洪水分析的tab
      tabList: ['实测降雨', '预报降雨', '洪水分析'], //洪水分析的tab
      selectNum: 2, //默认选中洪水分析


    }
  },
  computed: {
    dianame() {
      return this.$store.getters.dlgParams.name
    },
    leftFold() {
      return this.$store.getters.leftFold
    },
    hsfxFzcDate() {
      return this.$store.getters.hsfxFzcDate
    }

  },
  watch: {
    // leftFold 左边是否展开
    leftFold: {
      immediate: true,
      handler: function (val, oldVal) {
        this.floleft = val ? '1' : '2'
      }
    },
    dianame: {
      immediate: true,
      handler: function (val, oldVal) {
        console.log('newval:', val, ';oldval:', oldVal)
      },
    }
    // dianame(n, m) {
    //   this.sectinzindexs = n
    // },
    // deep: true

  },
  created() {
    this.$store.getters.pageState.yubaoFenXi_YMFW = false
    this.$store.getters.pageState.yubaoFenXi_FXD = false
    this.$store.dispatch('rightFold', true)
    this.onClickLLPL('rate');
    this.ListStyleobj1 = {
      'stTime': this.$store.getters.hsfxFzcDate,
      'enTime': this.$store.getters.hsfxFzcDate,
    },
      console.log('时间：', this.ListStyleobj1);

  },
  beforeDestroy() {
    // 离开前还原地图流量查询参数以还原水的颜色
    this.$eventBus.$emit('resetRIVLColor')
    this.$eventBus.$off('FZCINFO')
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      //console.log(res);
      let dat = this.$refs.hsfxChild.dataold;
      // 洪水分析  左侧无选中数据 ，村庄详情不展示洪水分析 有就展示 
      let strEnd = ''
      if (dat.strEnd) {
        strEnd = dat.strEnd;
        this.tablists = ['1'];//后台接口改好后放开
      } else {
        this.tablists = [];
      }
      let pams = {
        'Ewcode': res.ADCD,
        // 'strBegin': '',
        // 'strEnd': stend?stend:'',
        'perioD_END': strEnd ? strEnd : '',
        'ewcodetype': '2',
      };
      strEnd ? pams['rvcd'] = res.ADCD : ''
      this.$store.getters.dlgParams.params = pams;
      this.$store.getters.dlgParams.name = "FZCCuZINFO";
      //ADCD
    });
    this.$eventBus.$on('EB_YB_HS_Card_Click2', res => {
      var stTime = this.$moment(res.perioD_END).subtract(1, 'day').format('YYYY-MM-DD HH:mm')
      var enTime = this.$moment(res.perioD_END).format('YYYY-MM-DD HH:mm');
      this.ListStyleobj = {
        'stTime': stTime,
        'enTime': enTime
      }
    });

  },
  methods: {
    onHeadMeun(item, index) {
      let path = '/prediction/ShortPro/index' // 洪水分析路由
      if (item != '洪水分析') path = '/prediction/Measured'

      // 判断是否当前
      this.$store.dispatch("closePop");
      if (this.$route.path.indexOf(path) !== -1) return;
      //this.$router.push({ path: path,params:{ind:index,pagetyp:'1'} });predictionMeasured
      this.$router.push({ name: 'predictionMeasured', params: { ind: index, pagetyp: '1' } });

    },
    showHsfx(res) {
      this.$store.dispatch('rightFold', !res)
      this.infoTrue = res
    },
    onClickLLPL(mode) {
      this.floodAnalysisMode = mode
      this.$store.getters.pageState.HSFX_TYPE = mode
      if (this.$refs.productInfo) {
        this.$refs.productInfo.initright()
      }

      this.$eventBus.$emit('FloodAnalysisMode', mode)
    },
    onYBLLFX() {

    },
    setListStyleobj(res) {
      console.log(res);
    },
  }
}
</script>

<style lang="less" scoped>
.section-box {
  width: 100%;
  height: 100%;
  position: relative;

}

.sectinzindex {
  z-index: 30;
}
</style>
<style lang="scss" scoped>
.btn-left-top {
  position: absolute;
  width: auto;
  // top: 140px;
  // top:50px;
  top: 0px;
  padding: 5px 10px;
  z-index: 2;

  .btn {
    // white-space: nowrap;
    // display: flex;
    // align-items: center;
    // padding: 5px 10px;
    // background: rgba(14, 81, 133, 0.61);
    // border: 1px solid #0e5185;
    // display: inline-block;
    width: 82px;
    height: 36px;
    // line-height: 36px;
    padding-top: 11px;
    text-align: center;
    font-family: "MePangMenZhengDao";
    letter-spacing: 2px;
    font-size: 18px;
    color: #fff;
    background: url('~@/assets/imgNew/btnbg.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
    cursor: pointer;

    &:hover,
    &.active {
      // box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
      background: url('~@/assets/imgNew/btnactbg.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .martop8 {
    margin-top: 8px;
  }
}

.btnLeftTops {
  left: 35px;
}

.isShowtopflg {
  .btn-left-top {
    // top:100px;
    top: 0px;
  }
}

.legends {
  position: absolute;
  left: 19.5%;
  bottom: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.btn-center-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  bottom: 0px;
  display: flex;
  align-items: center;

  .btn {
    white-space: nowrap;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(14, 81, 133, 0.61);
    border: 1px solid #0e5185;

    &:hover,
    &.active {
      box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
    }

    &.disabled {
      background: #000000;
      color: #cccccc;
      pointer-events: none;
    }
  }
}

.tab {
  width: 100%;
  margin-left: 0px;
  justify-content: space-between;

  .tabTit {
    font-size: 14px;
    padding: 0;
    width: 49%;
    margin: 0px;
    box-sizing: border-box;
  }
}
</style>
